<template>
  <!-- 轨迹 -->
  <div>
    <el-row v-if="packageList.length > 0" :gutter="10">
      <el-col
        v-for="item in packageList" 
        :key="item.inquiryNumber"
        :span="24" 
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
      >
        <div class="mb8" style="padding: 10px;">
          <div class="topStyle">
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 50%;">
              {{ item.trackingAddressDOList[0].description || "暂无数据" }}
            </div>
            <el-button
              type="primary"
              text
              class="bt1"
              @click="handleInquiryNumber(item.trackingAddressDOList)"
            >
              查看轨迹
            </el-button>
            <div class="radial_gradient"></div>
          </div>
          <div class="footStyle">
            <el-col :span="24">
              <span style="line-height: 30px;font-weight: 700;">{{ item.inquiryNumber }}</span>
            </el-col>
            <el-col v-if="item.trackingAddressDOList && item.trackingAddressDOList.length > 0" :span="24">
              <div>
                <div style="display: inline-flex;">
                  子单件数：{{ `${item.childTrackingDOList.length + 1}件` }}
                </div>  
                <div style="display: contents;">
                  <el-button
                    type="primary"
                    text
                    @click="handleDetail(item.childTrackingDOList)"
                  >
                    查看子单
                  </el-button>
                </div>  
              </div>
            </el-col>
            <el-col v-else :span="24">
              暂无数据
            </el-col>
            <el-col v-if="item.trackingAddressDOList[0] && item.trackingAddressDOList[0].day" :span="24">
              <span style="line-height: 20px;font-size: 13px;">更新日期:</span>
              <span style="line-height: 20px;font-size: 13px;">{{ item.trackingAddressDOList[0].day }}</span>
            </el-col>  
            <el-col v-else :span=" 24">
              当货物到达我们的工厂时，交货日期将被更新。
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>  
    <div v-else style="text-align: center;">
      <img src="@/assets/images/img_no_data@3x.png" style="height: 200px;width: 200px;" />
    </div>
    <el-dialog
      v-model="open"
      :close-on-click-modal="false"
      append-to-body
      lock-scroll
      :title="title"
    >
      <el-row v-if="packageList2.length > 0" :gutter="10">
        <el-col
          v-for="item in packageList2"
          :key="item.childInquiryNumber"
          :span="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
        >
          <div class="mb8" style="padding: 10px;">
            <div class="topStyle2">
              <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 70%;font-weight: 700;font-size: 18px;">
                {{ item.childTrackingAddressDOList[0].description || "暂无数据" }}
              </div>
              <el-button
                type="primary"
                text
                class="bt2"
                @click="handleInquiryNumber(item.childTrackingAddressDOList)"
              >
                查看轨迹
              </el-button>
              <div class="radial_gradient"></div>
            </div>
            <div class="footStyle2">
              <el-col :span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                <span style="line-height: 40px;font-weight: 700;">{{ item.childInquiryNumber }}</span>
              </el-col>
              <el-col v-if="item.childTrackingAddressDOList[0] && item.childTrackingAddressDOList[0].day" :span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                <span style="line-height: 20px;font-size: 13px;">更新日期:</span>
                <span style="line-height: 20px;font-size: 13px;">{{ item.childTrackingAddressDOList[0].day }}</span>
              </el-col>
              <el-col v-else :span="24">
                当货物到达我们的工厂时，交货日期将被更新。
              </el-col>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      v-model="open2"
      class="myScrollbar"
      append-to-body
      lock-scroll
      :title="title2"
    >
      <el-scrollbar style="height: 300px;">
        <el-row>
          <el-col :span="24">
            <el-timeline v-if="trajectoryList && trajectoryList.length > 0">
              <el-timeline-item
                v-for="trajectory in trajectoryList"
                :key="trajectory.day"
                :timestamp="trajectory.day"
                placement="top"
              >
                <el-card>
                  <p>状态：{{ trajectory.description }}</p>
                  <p>地点：{{ trajectory.address }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <div v-else>暂无数据</div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineExpose, getCurrentInstance } from 'vue'

const packageList = ref([])
const packageList2 = ref([])
const trajectoryList = ref([])
const title = ref(null)
const open = ref(false)
const title2 = ref(null)
const open2 = ref(false)
const { proxy } = getCurrentInstance() as any
const handleInquiryNumber = (data) => {
  proxy.trajectoryList = data
  title2.value = '轨迹详情'
  open2.value = true
}
const handleDetail = (data) => {
  proxy.packageList2 = data
  title.value = '包裹详情'
  open.value = true
}

defineExpose({
  packageList,
})
</script>
<style lang="less" scoped>
.topStyle {
  height: 50px;
  // background-color: #72B8FE;
  background: linear-gradient(to top, rgb(157 204 254) 0%, rgb(102 180 255) 100%);
  border-radius: 8px;
  color: #fff;
  line-height: 50px;
  padding: 0 10px;
  position: relative;
}
/deep/.el-dialog__body {
  background-color: #f3f6fd;
}
.bt1 {
  position: absolute;
  right: 10px;
  color: #fff;
  display: block;
  margin: 0 auto;
  top: 0;
  line-height: 30px;
}
/* stylelint-disable-next-line selector-class-pattern */
.footStyle {
  height: 120px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #72b8fe;
}
.topStyle2 {
  height: 60px;
  // background-color: #72B8FE;
  background: #fff;
  border: 1px solid #f3f6fd;
  border-radius: 8px;
  border-bottom: 2px solid #f3f6fd;
  color: #000;
  line-height: 60px;
  padding: 0 10px;
  position: relative;
}
.footStyle2 {
  height: 80px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
}
.bt2 {
  position: absolute;
  right: 10px;
  color: #62b1e8;
  top: 0;
  display: block;
  margin: 0 auto;
  line-height: 40px;
}

 </style>